/**
 * 样衣上传
 */
import * as React from 'react'
import { Card, Form, Input, Button, Select, Radio, message, Steps, Modal, Table } from 'antd'
import Authentication from '../../router/Authentication'
import { PageHeaderLayout, SignleUpload } from '../../components'
import { FormComponentProps } from 'antd/lib/form/Form'
import { post, get, EDIT_SAMPLE, SUBMIT_SAMPLE } from '../../service/api'
const FormItem = Form.Item
const Option = Select.Option
const RadioGroup = Radio.Group
const Step = Steps.Step
export interface Props extends FormComponentProps{
  record: any
  band: any
  user: any
  history: any
  submitting: boolean
  coopers: any []
  sampleImgs: any
  workStatus: any []
  checkList: any []
}

export interface State {
  imgList?: any
  shVisible: boolean
}

@Authentication
class ThdemandInfo extends React.Component<Props, State> {
  myZhengMianPic: any = {}//正面照
  myBeiMianPic: any = {}//背面照
  myDetailPic: any = {}//细节照
  myXiaoGuoPic: any = {}//效果图
  myYanSePic: any = {}//颜色图

  state = {
    imgList: {},
    shVisible: false
  }
  getPic (pic: any []): string {
    if(pic && pic.length>0) return pic[0].guid
    else return ''
  }
  componentWillReceiveProps(nextProps: Props) {
    const { imgList } = this.state
    const { sampleImgs } = nextProps
    if(JSON.stringify(imgList) !==JSON.stringify(sampleImgs)) {
      this.setState({
        ...this.state,
        imgList: sampleImgs
      })
      if(sampleImgs.limg1) this.myZhengMianPic.setFiles({guid: sampleImgs.imgid1, imageUrl: sampleImgs.limg1})
      if(sampleImgs.limg2) this.myBeiMianPic.setFiles({guid: sampleImgs.imgid2, imageUrl: sampleImgs.limg2})
      if(sampleImgs.limg3) this.myDetailPic.setFiles({guid: sampleImgs.imgid3, imageUrl: sampleImgs.limg3})
      if(sampleImgs.limg4) this.myXiaoGuoPic.setFiles({guid: sampleImgs.imgid4, imageUrl: sampleImgs.limg4})
      if(sampleImgs.limg5) this.myYanSePic.setFiles({guid: sampleImgs.imgid5, imageUrl: sampleImgs.limg5})
    }
  }
  //提交
  handleSubmit = (e: any) => {
    e.preventDefault()
    const { record } = this.props
    get(SUBMIT_SAMPLE, {id: record.id}).then((res => {
      if (res.code == '1') message.success('操作成功！')
      else message.error(res.errMsg)
    }))
  }
  //保存
  handleSave = (e: any) => {
    e.preventDefault()
    const { record } = this.props
    this.props.form.validateFieldsAndScroll((err: any, values: any) => {
      if (!err) {
        values.id = record.id
        values.pic1=this.getPic(this.myZhengMianPic.getFiles())
        values.pic2=this.getPic(this.myBeiMianPic.getFiles())
        values.pic3=this.getPic(this.myDetailPic.getFiles())
        values.pic4=this.getPic(this.myXiaoGuoPic.getFiles())
        values.pic5=this.getPic(this.myYanSePic.getFiles())
        post(EDIT_SAMPLE, values).then((res: any) => {
          if (res.code == '1') {
            message.success('操作成功！')
          }else {
            message.error(res.errMsg)
          }
        })
      }
    })
  }
  clickStep = (status: number) => {
    if (status == 0) {
      this.setState({
        ...this.state,
        shVisible: true
      })
    }
  }
  render () {
    const { record, user, form, submitting, coopers, workStatus, checkList } = this.props
    const { getFieldDecorator } = form
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 34 },
        sm: { span: 12 },
        md: { span: 15 },
      },
    }
    const getStyle = (status: number): any => {
      let style = {}
      if (status == 0) style = { cursor: "pointer" }
      return style
    }
    const checkColumns = [
      { title: '检查项描述', dataIndex: 'checkinfo', key: 'checkinfo' },
      { title: '说明', dataIndex: 'reason', key: 'reason' }
    ]
    return (
      <PageHeaderLayout 
        title = "">
        <Form onSubmit={this.handleSave} hideRequiredMark style={{ marginTop: 8 }}>
          <Card bordered={false}>
            <FormItem label="样衣图片" {...formItemLayout}>
              <SignleUpload name="正面图" ref={(obj) => {this.myZhengMianPic=obj}}/>
              <SignleUpload name="背面图" ref={(obj) => {this.myBeiMianPic=obj}}/>
              <SignleUpload name="细节图" ref={(obj) => {this.myDetailPic=obj}}/>
              <SignleUpload name="效果图" ref={(obj) => {this.myXiaoGuoPic=obj}}/>
              <SignleUpload name="颜色图" ref={(obj) => {this.myYanSePic=obj}}/>
            </FormItem>
            <FormItem label="波段号" {...formItemLayout}>
              {getFieldDecorator('bandid', { initialValue: record.bandid })(
                <span className="ant-form-text">{record.bandname}</span>
              )}
            </FormItem>
            <FormItem label="供应商编码" {...formItemLayout}>
              {getFieldDecorator('supplierid', { initialValue: user.venderInfo.Id })(
                <span className="ant-form-text">{user.venderInfo.Id}</span>
              )}
            </FormItem>
            <FormItem label="供应商名称" {...formItemLayout}>
              <span className="ant-form-text">{user.venderInfo.Name}</span>
            </FormItem>
            <FormItem label="风格" {...formItemLayout}>
              <span className="ant-form-text">{`${record.dlText}-${record.xlText}`}</span>
            </FormItem>
            <FormItem label="供应商货号" {...formItemLayout}>
              {getFieldDecorator('pcode', { 
                initialValue: record.pcode,
                rules: [{ required: true, message: '请输入供应商货号' }]})(
                <Input placeholder="请输入供应商货号"/>
              )} 
            </FormItem>
            <FormItem {...formItemLayout} label="合作方式">
              {getFieldDecorator('jyfs',{
                 initialValue: record.jyfs,
                })(
                <Select
                  placeholder="请选择合作方式"
                >
                  {coopers.map( (cooper: any) => (
                    <Option key={cooper.value} value={cooper.value}>{cooper.label}</Option>
                  ))}
                </Select>
              )}
            </FormItem>
            <FormItem label="主荐款" {...formItemLayout}>
              {getFieldDecorator('ismain', { initialValue:"0" })(
                <RadioGroup>
                  <Radio value="1">是</Radio>
                  <Radio value="0">否</Radio>
                </RadioGroup>
              )}
            </FormItem>
          </Card>
          <Card bordered style = {{marginTop: "20px"}} title="样衣申请进度">
            <Steps direction="vertical" size="small" current={workStatus.length}>
                {workStatus.map((item: any, index: number) => (
                  <Step 
                    style={getStyle(item.status)} 
                    key={"step" + index.toString()} 
                    title={item.statusname} 
                    description={item.retstatusname} 
                    onClick= {() => this.clickStep(item.status)}></Step>
                ))}
            </Steps>
          </Card>
          <div style={{textAlign: 'center', marginTop: 20}}>
            <Button type="primary" htmlType="submit" loading={submitting}>
              保存
            </Button>
            <Button style={{ marginLeft: 8 }} onClick = { this.handleSubmit }>提交</Button>
            <Button style={{ marginLeft: 8 }} onClick={()=>{this.props.history.goBack()}} >返回</Button>
          </div>
        </Form>
        <Modal 
          visible={this.state.shVisible} 
          footer={null}
          title="样衣照片审核情况" 
          width={600} 
          maskClosable={false}
          onCancel={() => this.setState({ shVisible: false })}>
            <Table
              pagination = {false}
              rowKey = "ID"
              columns = {checkColumns}
              dataSource = {checkList.filter((row: any)=> row.checkflag == 0)} 
            />
        </Modal>
      </PageHeaderLayout>
    )
  }
}

export default Form.create()(ThdemandInfo)
